

//详情页面效果
define(['pAjax','jquery','config'],()=>{
    class Details{
        constructor(){
            this.details = document.querySelector('.con_right')
            this.magnifier=document.querySelector('.magnifier')

            this.init()
        }
        init(){
            this.request()
             new Zoom()
        }
        getQueryStr(id){
            let str = location.search.slice(1)
            let arr = str.split('&')
            let obj = {}
            arr.forEach(item=>{
                let newArr = item.split('=')
                obj[newArr[0]] = newArr[1] 
            })
            return obj[id]
        }
        request(){
            let id = this.getQueryStr('id') - 0
            if(!id){
                location.href = '/_index.html'
                return false
            }else{
                pAjax({url: '/data/goods.json'})
                .then(data=>{
                    let newData = JSON.parse(data)
                    
                    newData = newData.slice(0, 200)
                    
                    let res=newData.find(item=>item.goods_id==id)
                    
                    this.render(res)
                })
            }
        }
        
        render(res){
            this.details.innerHTML = res.goods_introduce
            this.magnifier.innerHTML=`
            <div class="magnifier_left">
                <div class="box">
                    <img src="${res.img_small_logo}" alt="">
                    <span></span>
                </div>
                <div class="bigBox">
				    <img src="${res.img_small_logo}" >
			    </div>
            </div>
            <div class="magnifier_center">
                <h2>${res.title}</h2>
                <div class="price">
                    <div class="price_01">
                        <span>促销</span>
                        <strong>${res.price}</strong>
                    </div>
                    <div class="price_02">
                        <span>原价</span>
                        <span class="sp">${res.price*1.5}</span>
                    </div>
                </div>
                <div class="xlpj">
                    <span class="xlpj_left">687<br>月销量</span>
                </div>
                <div class="shuliang">
                    <span class="attr_left">数量</span>
                    <button class="jian">-</button>
                    <input type="text" value="${res.cart_number}" class="tex">
                    <button class="jia">+</button>
                    <span class="attr_right">库存500件</span>
                </div>
                <div class="index_goumai">
                    <span>立即购买</span>
                    <span class="jrgwc">加入购物车</span>
                </div>
                <div class="fwcl">
                    <span>服务承诺</span>
                    <strong>正品保证|按时发货 安心退货</strong>
                </div>
            </div>
            `
            this.bindHtml(res)
            // require(['magnifier'],(modA)=>{
        
            //  });
            new Zoom()
             
        }
        bindHtml(res){
            this.magnifier.onclick = (e)=>{

                let target = e.target || e.srcElement

                if(target.className == 'jian'){
                    if($('.tex').val()>0){
                        res.cart_number--
                        this.render(res) 
                    } 
                }else if(target.className == 'jia'){
                    res.cart_number++
                    this.render(res)
                }
                
            }
            this.jrgwc=document.querySelector('.jrgwc')
            this.jrgwc.onclick=()=>{
                let id = location.href.split('?')[1].split('=')[1]
                let list = JSON.parse(localStorage.getItem('cart')) || []
                let her=list.find(item => item.goods_id == id)
                if(her){
                    if(res.cart_number==0){
                        alert('您未添加商品数量')
                        return
                    }else{
                        her.cart_number += res.cart_number
                    }
                }else{
                    if(res.cart_number==0){
                        alert('您未添加商品数量')
                        return
                    }else{
                        list.push(res)
                    }
                }
                localStorage.setItem('cart',JSON.stringify(list))
                fn()
            }
            function fn(){
                location.href='/html/cart.html'
            }
        }
    }
    
  

    function Zoom(){
        //变成对象的属性
        this.smallBox = document.querySelector('.box')
        
        this.mask = document.querySelector('.box>span')
        this.bigBox = document.querySelector('.bigBox')
        this.pic = document.querySelector('.bigBox>img')
        //调用方法
        this.init()
    }
    //在原型对象上面设置方法
    //init表示初始化，专门管理方法调用
    Zoom.prototype.init = function(){
        this.over()
        this.out()
        this.move()
    }
    Zoom.prototype.over = function(){
        //this备份，在能找到this的地方进行存储
        //let that = this
        //当鼠标移入到smallBox里面时让遮罩层和大盒子显示出来
       
        this.smallBox.onmouseover = ()=>{
            //console.log(that)
            
            this.mask.style.display = 'block'
            this.bigBox.style.display = 'block'
        }
    }
    Zoom.prototype.out = function(){
       //当鼠标移出到smallBox外面时让遮罩层和大盒子隐藏
        this.smallBox.onmouseout = ()=>{
            this.mask.style.display = 'none'
            this.bigBox.style.display = 'none'
        }
    }
    Zoom.prototype.move = function(){
        //当鼠标移动smallBox里面面时让遮罩层进行移动，要求光标始终在遮罩层中间区域
        this.smallBox.onmousemove = (e)=>{
            e = e || window.event
            //获取鼠标坐标
            let x = e.pageX - this.smallBox.offsetParent.offsetLeft - this.mask.offsetWidth/2
            let y = e.pageY - this.smallBox.offsetParent.offsetTop - this.mask.offsetHeight/2
            //边界值判断
            if(x<=0){
                x = 0
            }else if(x>=this.smallBox.offsetWidth - this.mask.offsetWidth){
                x = this.smallBox.offsetWidth - this.mask.offsetWidth
            }
            if(y<=0){
                y = 0
            }else if(y>=this.smallBox.offsetHeight - this.mask.offsetHeight){
                y = this.smallBox.offsetHeight - this.mask.offsetHeight
            }
            //进行赋值
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            //计算比例
            let w = x / (this.smallBox.offsetWidth - this.mask.offsetWidth)
            let h = y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
            //给大图进行赋值操作
            this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
            this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'
        }
    }
    return Details
});